<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="../common/taglibs.jsp"%>
<html>
<head>
<script src="${ctx}/static/js/jquery.js" type="text/javascript"></script>
<script src="${ctx}/static/js/jquery-plugins.js" type="text/javascript"></script>
<script src="${ctx}/static/js/s.js" type="text/javascript"></script>
<s:head theme="xhtml" />
<title><s:property value="getText('acc.reg.title')" /></title>
</head>
<body>
<div>
<p><s:property value="getText('acc.reg.title')" /></p>
<s:form action="/acc/reg/save" onsubmit="return validate();">
	<table>
		<tr>
			<td></td>
			<td><input id="id" name="person.id" style="display: none" /></td>
			<td></td>
		</tr>
		<tr>
			<td><s:property value="getText('acc.reg.code')" /></td>
			<td><input id="code" name="person.code" onblur="checkAvailable();"/></td>
			<td>
				<span id="wrongcode" style="display: none; color: red"><s:property value="getText('acc.reg.info.wrongcode')" /></span>
				<span id="unavailablecode" style="display: none; color: red"><s:property value="getText('acc.reg.info.unavailablecode')" /></span>
			</td>
		</tr>
		<tr>
			<td><s:property value="getText('acc.reg.name')" /></td>
			<td><input id="name" name="person.name" /></td>
			<td></td>
		</tr>
		<tr>
			<td><s:property value="getText('acc.reg.email')" /></td>
			<td><input id="email" name="email" onblur="validateEmail();"/></td>
			<td>
				<span id="wrongemail" style="display: none; color: red"><s:property value="getText('acc.reg.info.wrongemail')" /></span>
			</td>
		</tr>
		<tr>
			<td><s:property value="getText('acc.reg.password')" /></td>
			<td><input id="password" name="person.password" type="password" /></td>
			<td></td>
		</tr>
		<tr>
			<td><s:property value="getText('acc.reg.repassword')" /></td>
			<td><input id="repassword" type="password"  onblur="validateEmail();"/></td>
			<td>
				<span id="wrongpwd" style="display: none; color: red"><s:property value="getText('acc.reg.info.wrongpwd')" /></span>
			</td>
		</tr>
		<tr>
			<td><s:property value="getText('certpic')" /></td>
			<td><input id="certpic" onblur="checkCertCodeRight();"/></td>
			<td>
				<span id="wrongcert" style="display: none; color: red"><s:property value="getText('certpic.wrong')" /></span>
			</td>
		</tr>
		<tr>
			<td></td>
			<td><img id="certPicture" src="${ctx}/sec/certpic" title="<s:property value="getText('changecertpic')" />" onclick="changeCertPic();" style="cursor:pointer"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td align="right">
			<button type="submit"><s:property value="getText('submit')" /></button>
			</td>
			<td></td>
		</tr>
	</table>
</s:form></div>
</body>
<script type="text/javascript">
var _sys_reg_code_available = false;
var _sys_reg_certpic_ok = false;
function changeCertPic(){
	var timenow = new Date().getTime();
	$("#certPicture")[0].src="${ctx}/sec/certpic?t="+timenow;
	_sys_reg_certpic_ok=false;
}
function validate(){
	if(!validateCode())return false;
	if(!validateEmail())return false;
	if(!validatePassword())return false;
	if(!validateCertCode())return false;
	if(!_sys_reg_code_available)return false;
	encryptpwd();
	return true;
}

function encryptpwd(){
	var pwd=$("#password").attr("value");
	var encryptedPwd=$.sha1(pwd);
	$("#password").val(encryptedPwd);
	$("#repassword").val(encryptedPwd);
}
function validateCertCode(){
	if(!_sys_reg_certpic_ok){
		$("#wrongcert").css({display:"block"});
	}
	return _sys_reg_certpic_ok;
}
function validatePassword(){
	var pwd=$("#password").attr("value");
	var repwd=$("#repassword").attr("value");
	if(pwd==undefined||pwd==""){
		$("#wrongpwd").css({display:"block"});
		return false;
	}else{
		$("#wrongpwd").css({display:"none"});
	}
	if(pwd!=repwd){
		$("#wrongpwd").css({display:"block"});
		return false;
	}else{
		$("#wrongpwd").css({display:"none"});
	}
	return true;
}
function validateEmail(){
	var email=$.trim($("#email").attr("value").toLowerCase());
	$("#email").val(email);
	if(email==""||email.replace(/(\.|-|\w)+@(\w|-|\.)+\.[a-z]+/g,"")!=""){
		$("#wrongemail").css({display:"block"});
		return false;
	}else{
		$("#wrongemail").css({display:"none"});
		return true;
	}
}
function validateCode(){
	//if(!_sys_reg_code_available)return false;
	var code=$.trim($("#code").attr("value").toLowerCase());
	$("#code").val(code);
	if(code==undefined||code==""){
		$("#wrongcode").css({display:"block"});
		return false;
	}else{
		$("#wrongcode").css({display:"none"});
	}
	if(code.replace(/^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){5,31}$/g,"")!=""){
		$("#wrongcode").css({display:"block"});
		return false;
	}else{
		$("#wrongcode").css({display:"none"});
		return true;
	}
}

function checkCertCodeRight(){
	var code=$("#certpic").attr("value");
	checkCertCode(code);
}
function checkCertCode(code){
	$.ajax({
		url: "${ctx}/sec/reg/checkcertcode?arg1="+code,
		type: "post",
		dataType: "json",
		timeout: 5000,
		error: function(){
			alert("Error loading XML document");
		},
		success: function(root){
			var right = root.json.code;
			checkCertCodeCallback(right);
		}
	});
}
function checkCertCodeCallback(right){
	if(right=="-1"){
		$("#wrongcert").css({display:"block"});
		_sys_reg_certpic_ok=false;
	}else{
		$("#wrongcert").css({display:"none"});
		_sys_reg_certpic_ok=true;
	}
}

function checkAvailable(){
	var code=$.trim($("#code").attr("value").toLowerCase());
	$("#code").val(code);
	if(code==undefined||code==""){
		$("#wrongcode").css({display:"block"});
		_sys_reg_code_available=false;
	}else{
		$("#wrongcode").css({display:"none"});
	}
	if(validateCode())isCodeAvailable(code);
}
function isCodeAvailable(code){
	$.ajax({
		url: "${ctx}/acc/reg/checkcode?arg1="+code,
		type: "post",
		dataType: "json",
		timeout: 5000,
		error: function(){
			alert("Error loading XML document");
		},
		success: function(root){
			var available = root.json.code;
			showCodeAvailable(available);
		}
	});
}
function showCodeAvailable(available){
	if(available=="-1"){
		$("#unavailablecode").css({display:"block"});
		_sys_reg_code_available=false;
	}else{
		$("#unavailablecode").css({display:"none"});
		_sys_reg_code_available=true;
	}
}
</script>
</html>

